<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=640, user-scalable=no" />
		 <link rel="stylesheet"  type="text/css"  href="css/zepto.fullpage.css"/>
		 <link rel="stylesheet"  type="text/css"  href="css/global.css"/>
		 <link rel="stylesheet" type="text/css" href="css/music.css" />
		<link rel="stylesheet" href="css/animate.css">
	</head>
	<body>
		<div class="wp">
			<div class="wp-inner">
				<div class="page page1">1
					<h1 class="logo">
						<img src="images/p1/logo.png" alt="" />
					</h1>
					<div class="oneyear js-anmate animated" data-animate="bounceInLeft" >
						<img src="images/p1/page1_1.png"/>
					</div>
					<div class="dont js-anmate animated" data-animate="bounceInRight">
						<img src="images/p1/dont.png" alt="" />
					</div>
					<div class="eleven">
						<img src="images/p1/11.png"/>
					</div>
					<div class="person js-anmate animated" data-animate="bounceInDown">
						<img src="images/p1/person.png" alt="" />
					</div>
				</div>
				<div class="page page2">2
                  <div class="page2-1 js-anmate animated" data-animate="bounceInLeft">
					  <img src="images/p2/font.png" alt="">
				  </div>
					<div class="page2-2 js-anmate animated" data-animate="bounceInDown">
						<img src="images/p2/page2_1.png" alt="">
					</div>
				</div>
				<div class="page page3">3</div>
				<div class="page page4">4</div>
			</div>
		</div>
		<!--音乐播放-->	
		<div class="music-box" style="background:url(images/p1/music_2.gif) no-repeat;">
			<i style="animation:rote 2.5s linear 0s infinite;"></i>
		</div>
		<audio id="yinyue" src="music/betterman.mp3" autoplay="autoplay" loop="loop"></audio>
		<!--<embed src="music/betterman.mp3" type="" autoplay="true">-->
	</body>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript"src="js/zepto.fullpage.js"></script>
	<script>
//	     滚屏效果

		$('.wp-inner').fullpage({
			//改变的时候播放动画
			change:function(e){
				//  查看当前第几层
				//e.cur 滚动第几层，所获取所在屏幕的编号
				console.log(e.cur);
				//先把要做动画的元素都隐藏
				//滚动哪一屏幕就让哪一屏幕中的js-animate隐藏
				$('.page').eq(e.cur).find('.js-anmate').each(function(){
					//获取data-animate中的属性值
					$(this).addClass($(this).data('animate')).hide();
				})
			},
			afterChange:function(e){
                 //进入之后，让里边要做动画部分显示
				 $('.page').eq(e.cur).find('.js-anmate').each(function(){
					 $(this).addClass($(this).data('animate')).show();
				 }
				 )
			}
		});
//		声音播放
       var flag=1;
       //1 表示当前是开的 0表示关闭

       $('.music-box i').click(function(){
//  	alert("ok")
     var player=$("#yinyue")[0];
       if(flag ==1){
       	$(this).css('animation','');
       	$('.music-box').css('background','');
         player.pause();
       	flag=0;
       }else{
       		$(this).css('animation','rote 2.5s linear 0s infinite');
       	$('.music-box').css('background','url(images/p1/music_2.gif) no-repeat');
		   player.play();
       	flag=1;
       }
       })
	</script>
</html>
